<template>
  <el-dialog :title="title" :visible.sync="showModel" width="900px" :close-on-click-modal="false">
    <div class="main">
      <div class="header">
        <b style="width: 100px;display: inline-block;text-align: right;">城市：</b>
        <el-select v-model="city_id" placeholder="请选择城市" filterable :disabled="city_id ? false : true"
          @change="cityChangeHandler">
          <el-option :label="item.label" :value="item.value" v-for="item, index in cityList" :key="index" />
        </el-select>
      </div>

      

      <div class="header2">
        <span class="title" style="width: 100px;font-weight: 600;">锦江酒店名称：</span>
        <div class="filter-item">
          <el-input v-model="JJlistQuery.inn_name" placeholder="请输入锦江酒店名称" style="width: 600px;" clearable />
        </div>
        <el-button type="primary" class="search" @click="JJFilterHandler">搜索</el-button>
      </div>

      <div style="color: #f56666;margin-bottom: 15px;max-width: 800px;">
        锦江：{{ JJCurrentObj.inn_name }}
      </div>

      <div class="container">
        <el-table :data="jjTableData" border style="width: 800px" :show-header="false" v-loading="listLoading">
          <el-table-column prop="inn_name" label="酒店名称">
            <template slot-scope="scope">
              <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                {{ scope.row.inn_name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column width="200" align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="selectJJHotel(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination :current-page="JJlistQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="JJlistQuery.limit"
            :total="JJtotal" background layout="total, sizes, prev, pager, next, jumper"
            @size-change="JJhandleSizeChange" @current-change="JJhandleCurrentChange" />
        </div>

      </div>
      <div class="header1">
        <div class="title" style="width: 100px;font-weight: 600;">携程子酒店ID:</div>
        <div class="filter-item">
          <el-input v-model="hotel_id" placeholder="请输入携程子酒店ID" style="width: 600px;" clearable />
        </div>
      </div>
      <div class="header1">
        <div class="title" style="width: 100px;font-weight: 600;">携程酒店名称：</div>
        <div class="filter-item">
          <el-input v-model="XClistQuery.hotel_name" placeholder="请输入携程酒店名称" style="width: 600px;" clearable />
        </div>
        <el-button type="primary" class="search" @click="XCFilterHandler">搜索</el-button>
      </div>
      

      <div style="color: #145bf2;margin-bottom: 15px;max-width: 800px;">
        携程：{{ XCCurrentObj.hotelName }}
      </div>

      <div class="container">
        <el-table :data="xcTableData" border style="width: 800px" v-loading="listLoading">
          <el-table-column prop="hotelName" label="酒店名称">
            <template slot-scope="scope">
              <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                {{ scope.row.hotelName }}
              </div>
            </template>
          </el-table-column>

          <el-table-column width="200" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="selectXCHotel(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination :current-page="XClistQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="XClistQuery.limit"
            :total="XCtotal" background layout="total, sizes, prev, pager, next, jumper"
            @size-change="XChandleSizeChange" @current-change="XChandleCurrentChange" />
        </div>
      </div>
    </div>
    <div class="footer-button">
      <el-button @click="turnOff">返回</el-button>
      <el-button type="primary" @click="submitHandler">提交</el-button>
    </div>

  </el-dialog>
</template>
<script>
import { getMotherHotelList, getJJHotelList, subHotelSave } from '@/api/hotel'
export default {
  data() {
    return {
      city_id: '',
      hotel_id:'',
      XCtotal: 0,
      XClistQuery: {
        hotel_name: '',
        page: 1,
        limit: 10,
      },
      XCCurrentObj: {
        hotelName: '',
        master_hotel_id: '',
      },

      JJtotal: 0,
      JJlistQuery: {
        inn_name: '',
        page: 1,
        limit: 10,
      },
      JJCurrentObj: {
        inn_name: '',
        inn_id: '',
      },

      listLoading: false,
      xcTableData: [],
      jjTableData: [],
    };
  },
  props: {
    show: {
      default: false,
      type: Boolean
    },
    type: {
      default: 'add',
      type: String
    },
    cityList: {
      default: () => [],
      type: Array
    },
    currentObj: {
      default: () => { },
      type: Object
    }
  },
  computed: {
    showModel: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      }
    },
    title() {
      return this.type == 'add' ? '添加关联' : '修改关联';
    }
  },
  async created() {
    console.log("🚀 ~ this.this.currentObj ~ this.this.currentObj:", this.currentObj)
    if (this.type === 'add') {
      this.city_id = this.cityList[0].value;

    } else if (this.type === 'edit') {
      this.city_id = this.currentObj.city_id;

      this.XCCurrentObj.hotelName = this.currentObj.hotel_name;
      this.XCCurrentObj.master_hotel_id = this.currentObj.master_hotel_id;
      this.JJCurrentObj.inn_name = this.currentObj.hotel.inn_name;
      this.JJCurrentObj.inn_id = this.currentObj.hotel.inn_id
    }
    await this.XCGetList();
    await this.JJGetList();
  },
  methods: {
    async XCGetList() {
      console.log("🚀 ~ getList ~ this.type:", this.type)
      this.listLoading = true
      let obj = {
        ...this.XClistQuery,
        city_id: this.city_id
      }
      let res = await getMotherHotelList(obj)
      if (res.code === 0) {
        this.xcTableData = res.data.items
        this.XCtotal = res.data.total
        this.listLoading = false

        // if(this.type === 'edit'){
        //     this.XCCurrentObj.hotelName = this.currentObj.hotelName;
        //     this.XCCurrentObj.master_hotel_id = .masterHotelID;
        // }

      }
    },
    async JJGetList() {
      console.log("🚀 ~ getList ~ this.type:", this.type)
      this.listLoading = true
      let obj = {
        ...this.JJlistQuery,
        city_id: this.city_id
      }
      let res = await getJJHotelList(obj)
      if (res.code === 0) {
        this.jjTableData = res.data.items
        this.JJtotal = res.data.total
        this.listLoading = false
      }
    },
    submitHandler() {
      if (!this.XCCurrentObj.master_hotel_id) {
        return this.$message({
          type: 'error',
          message: '请选择携程酒店'
        });
      }
      if (!this.JJCurrentObj.inn_id) {
        return this.$message({
          type: 'error',
          message: '请选择锦江酒店'
        });
      }
      this.$confirm('是否提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = this.type === 'add' ? 0 : this.currentObj.id;
        let obj = {
          id: id,
          city_id: this.city_id,          
          hotel_id:this.hotel_id,
          master_hotel_id: this.XCCurrentObj.master_hotel_id,
          inn_id: this.JJCurrentObj.inn_id
        }
        console.log("🚀 ~ submitHandler ~ obj:", obj)
        subHotelSave(obj).then(res => {
          if (res.code === 0) {
            this.$emit('update')
            this.turnOff();
            this.$message({
              type: 'success',
              message: '提交成功!'
            });
          }
        })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    cityChangeHandler(val) {
      console.log('val', val)
      this.XCGetList();
      this.JJGetList();
    },
    selectXCHotel(val) {
      console.log('val', val)
      this.XCCurrentObj.hotelName = val.hotelName;
      this.XCCurrentObj.master_hotel_id = val.masterHotelID;
    },
    selectJJHotel(val) {
      console.log('val', val)

      this.JJCurrentObj.inn_name = val.inn_name;
      this.JJCurrentObj.inn_id = val.inn_id
    },
    XCFilterHandler() {
      this.XClistQuery.page=1
      this.XCGetList()
    },
    JJFilterHandler() {
      this.JJlistQuery.page=1
      this.JJGetList()
    },
    turnOff() {
      this.showModel = false;
    },
    XChandleSizeChange(val) {
      this.XClistQuery.limit = val
      this.XCGetList();
    },
    XChandleCurrentChange(val) {
      this.XClistQuery.page = val
      this.XCGetList();
    },
    JJhandleSizeChange(val) {
      this.JJlistQuery.limit = val
      this.JJGetList();
    },
    JJhandleCurrentChange(val) {
      this.JJlistQuery.page = val
      this.JJGetList();
    },

  },

}
</script>
<style lang="scss" scoped>
.main {
  padding: 0 0px 0 20px;

  .header {
    .search {
      margin-left: 30px;
    }
  }

  .header1 {
    display: flex;
    align-items: center;
    margin: 20px 0;

    .filter-item {
      margin-right: 15px;
    }

    .title {
      color: #145bf2;
    }
  }

  .header2 {
    display: flex;
    align-items: center;
    margin: 40px 0 20px 0;

    .filter-item {
      margin-right: 15px;
    }

    .title {
      color: #f56666;
    }
  }

  .container {
    .title {
      margin-top: 30px;
    }

    &>.title:nth-of-type(1) {
      color: #145bf2;
    }

    &>.title:nth-of-type(2) {
      color: #f56666;
    }
  }


}

.footer-button {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>